<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    div{
        height:100px;
        width:100px;
        background-color: red;
        /* translateX:X位移 
           translateY:Y位移 
           translateZ:Z位移 
           translate(10px,10px) x y 轴
           translate3d(10px,10px,10px) x,y,z
        */
        /* 
           scale(n) n倍数 高度和宽度缩放
           scale(x,y) 宽度 高度
         */

         /* https://blog.csdn.net/wjnf012/article/details/78658298
         rotateX(45deg) X轴旋转
         rotateY(45deg) Y轴旋转
         rotateZ(45deg) Z轴旋转
         rotate(45deg)  圆心点
         rotate3d(1,0,0,deg) x轴 */

         /* skewX(deg) X轴倾斜
         skewY(deg) Y轴倾斜
         skew(deg,deg) X轴倾斜 */
    }
    div:hover{
        /* 变形 */
        /* transform: translate3d(10px,10px,10px); */
        /* transform: scale(1,1.5); */

        /* 变形时候的作用原点
           默认center
           水平方向：left、 center、 right
           垂直方向：top、center、bottom

            transform-origin:0px 0px;
            transform-origin:50% 50%;
         */
        /* transform-origin:0px 0px;
        transform:rotateX(-45deg); */

        transform: skew(15deg,15deg);
    }
   </style>
</head>
<body>
    <div></div>
</body>
</html>